<template>
  <div>
    <h3>类组件</h3>
    <ul>
      <li>{{ msg1 }}</li>
      <!-- <li>{{msg3}}</li> -->
      <li>{{ msg4 }}</li>
      <li>{{ msg5 }}</li>
    </ul>
    <div>
      <button @click="show(2, 'aa')">事件</button>
    </div>
    <div ref="box">
      box
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop, Watch, Ref } from "vue-property-decorator";
import { Person } from "../types";
@Component({
  directives: {
    // 局部指令(驼峰转小写加-)
    directives1: (el: HTMLElement, binging): void => {
      // v-my-directive:arg变量="'value变量'"
      /* 钩子
      // bind：只调用一次，初始化, 获取参数
      // inserted：被绑定元素插入父节点时调用
      // update：所在组件的 VNode 更新时调用
      // componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      // unbind：解绑*/
      console.log("指令1-操作DOM", binging.value,binging.arg);
    },
  },
  filters: {
    // 局部过滤器
    filters1(data: string, arg: number = 2): string {
      return "过滤后的数据" + data.substring(0, arg);
    },
  },
})
export default class ClassCom extends Vue {
  // 元数据 ~~ 原: data ~~ 现: 类的实例属性
  msg1: string = "字符串变量";
  // msg2: string = "字符串变量" + this.props.属性;
  msg3: undefined = undefined; // 这样定义之后,不能赋值其他类型&也导致非响应式&控制台报错
  msg4: any = null; // 页面不渲染&响应式
  msg5: Person = { id: 1, name: "hsl" };
  mounted(): void {
    console.log(this.msg1, this.msg5.name);
    this.bbox.style.background = "#f00";
  }
  // 计算属性
  get computedMsg(): string {
    return this.msg1 + "是经过计算的";
  }
  show(arg1: number, arg2: string): void {
    console.log("类组件的实例方法", arg1, arg2);

    console.log(this.params1);
  }
  @Prop() readonly params1!: string;
  @Watch("msg1")
  onMsg1Change(newValue: string, oldValue: string): void {
    console.log("类组件的实例属性msg1变化", newValue, oldValue);
  }
  @Watch("msg5", { deep: true, immediate: true })
  onMsg5Change(newValue: string, oldValue: string): void {
    console.log("类组件的实例属性msg5变化", newValue, oldValue);
  }

  // ref引用元素
  @Ref("box") bbox!: HTMLDivElement;
}
</script>
